<template>
	<view class="page">
		<!-- 头部 start -->
		<view class="head">
			<view class="one">
				魔都羽毛球道友圈
			</view>
			<view class="two">
				<view class="address">
					上海市徐汇区枫林街道
				</view>
				<view class="slogan">
					简介：以球交友
				</view>
			</view>
			<view class="three">
				<view class="head-img">
					<view v-for="(img, ind) in imgs" :key="ind" v-if="ind < 6" class="icon-box">
						<image class="icon" :src="img" mode=""></image>
					</view>
					<view class="icon-box">+5</view>
				</view>
				<view class="invite">
					<view class="">
						道友10人
					</view>
					<view class="">
						邀请好友
					</view>
				</view>
			</view>
		</view>
		<!-- 头部 end -->
		
		<!-- 列表 start -->
		<view class="list">
			<spaceCompo class="spaceComp" v-for="(space, ind) in spaces" :key="ind" :spaceId="space.id" :title="space.title"
			:count="space.count" :joincount="10" :project="space.project" :address="space.address"
			:time="space.spacetime" :publisher="space.createUserStr" :join="space.joinFlag"
			@toJoin="toJoin" @toExit="toExit" @spaceInfo="spaceInfo" @showModal="showModal"></spaceCompo>
		</view>
		<!-- 列表 end -->
		<view class="footer">
			<button class="publish" @tap="publish">发布活动</button>
		</view>
		
		<view class="" style="width:0px;height:0px;overflow:hidden;margin-top: -2000px;">
			<canvas style="width: 320px; height: 250px;" canvas-id="shareCanvas"></canvas>	
		</view>
		
		<!--底部抽屉-->
		<view class="mask-screen" @tap="hideModal" v-show="showModalStatus"></view>
			<view :animation="animationData" class="region-box" v-show="showModalStatus">
				<canvas disable-scroll="true" @touchstart="touchMove" @touchend="touchMove" @touchmove="touchMove"
				 style="display:block;margin:0 auto;width: 320px; height: 370px;background-color: #FFFFFF;" canvas-id="myCanvas"></canvas>				
				<view class="button-box">
					<!-- #ifdef H5 -->
					<button class="button" plain="true" style="border: none;color: #25265E;">分享给好友</button>
					<!-- #endif -->
					<!-- #ifdef !H5 -->
					<button class="button" plain="true" style="border: none;color: #25265E;" open-type="share" :id="spaceId">分享给好友</button>
					<!-- #endif -->
					<button class="button" plain="true" style="border: none;color: #25265E;" @tap="saveCans">保存到相册</button>
				</view>
			 </view>
			 <view @tap="hideModal" class="cancel" v-show="showModalStatus">
			 	<view class="iconfont icon-ic_close" style="font-size: 50px;color: white;"></view>
			 </view>
		</view>
	</view>
</template>

<script>
	
	import spaceCompo from '../../../components/space-compo/space-compo.vue'
	
	export default {
		onShareAppMessage(res){
			if (res.from === 'button') {
				this.hideModal();
				var space = {};
				for (var i = 0; i < this.spaces.length; i++) {
					if(this.spaces[i].id == res.target.id){
						space = this.spaces[i];
					}
				};
				return {
					 title: '寻找志同道合的道友，就差你了',
					 withShareTicket: true,
					 path: '/pages/main/spaceInfo/addSpace/addSpace.vue',
					 imageUrl: this.tempFilePath
				}
			}else {
				// return {
				// 	title: '寻找志同道合的道友，就差你了',
				// 	withShareTicket: true,
				// 	path: '/pages/main/spaceInfo/addSpace/addSpace.vue',
				// 	imageUrl: 'https://b-ssl.duitang.com/uploads/blog/201312/04/20131204184148_hhXUT.jpeg'
				// }
			}
		},
		data() {
			return {
				circleId: '',
				imgs: ['../../../static/img/user.png','../../../static/img/user.png','../../../static/img/user.png',
				'../../../static/img/user.png','../../../static/img/user.png','../../../static/img/user.png',
				'../../../static/img/user.png','../../../static/img/user.png','../../../static/img/user.png'],
				spaces: [],
				userInfo: {},
				widthjoin: {},
				widthall: {},
				showModalStatus: false,
				animationData: "",
				cansWidth: 320,
				cansHeight: 320,
				windowWidth: 0,
				windowHeight:0,
				tempFilePath: ''
			}
		},
		onLoad(params) {
			this.userInfo = this.getGlobalUser("globalUser");
			var circleId = params.circleId;
			this.circleId = circleId;
			this.getSpaces();
		},
		methods: {
			touchMove(e){
				e.preventDefault();
			},
			showModal: function() {
				// 显示遮罩层
				// 创建动画实例 
				let animation = uni.createAnimation({
					duration: 200,
					timingFunction: "linear",
					delay: 0
				})
				// animation.translateY(uni.upx2px(712)).step()
				this.animationData = animation.export();
				this.showModalStatus = true
				setTimeout(function() { 
					animation.translateY(0).step();
					this.animationData = animation.export();
					this.draw();
				}.bind(this), 200);
			},
			hideModal: function() {
				this.showModalStatus = false
			},
			saveCans(){
				uni.showLoading({
					title:'保存ing...',
					mask:true
				})
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.cansWidth*1.5,
					height: this.cansHeight * 1.5,
					destWidth: this.cansWidth * 3,
					destHeight: this.cansHeight * 3,
					canvasId:'myCanvas',
					success: function(res) {
					uni.hideLoading()
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function (res) {
							uni.showToast({
								title:'保存相册成功,快去分享到朋友圈吧~'
							})
						},
						fail(res) {
						console.log(res)
						if(res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
							uni.showModal({
								title:'您需要授权相册权限',
								success(res) {
									if(res.confirm){
										uni.openSetting({
											success(res) {
											
											},
											fail(res) {
												console.log(res)
											}
										})
									}
								}
							})
						}
						}
					});
					},
					fail(res) {
					  uni.hideLoading()
					}
				},this)
			},
			getSpaces(){
				this.$apis.getCirSpace({circleId: this.circleId, memId: this.userInfo.id}).then((res) => {
					this.spaces = res;
				});
			},
			publish(){
				uni.redirectTo({
					url: '../spaceInfo/addSpace/addSpace?circleId=' + this.circleId
				})
			},
			toJoin(e){
				this.$apis.joinSpace({memId: this.userInfo.id, spaceId: e}).then((res) => {
					this.getSpaces();
				});
			},
			toExit(e){
				this.$apis.exitSpace({memId: this.userInfo.id, spaceId: e}).then((res) => {
					this.getSpaces();
				});
			},
			spaceInfo(e){
				uni.navigateTo({
					url: '../spaceInfo/addSpace/addSpace?spaceId=' + e
				})
			},
			draw(){
				uni.showLoading({
					title: '生成图片中···',
					mask: true
				});
				this.isBarHeight999().then((res) => {
					this.windowWidth = res.windowWidth;
					this.windowHeight = res.windowHeight;
				})
				const ctx = uni.createCanvasContext('myCanvas');
				
				ctx.setFontSize(20);
				ctx.setFillStyle('#25265E');
				ctx.setTextAlign('center');
				ctx.fillText('道友圈', 160, 25);
				
				ctx.drawImage('../../../static/img/time.png', 10, 65, 20, 20);
				
				ctx.setFontSize(14);
				ctx.setFillStyle('#25265E');
				ctx.setTextAlign('left');
				ctx.fillText("10月8日羽毛球", 40, 80);
				
				ctx.beginPath();
				ctx.setStrokeStyle("#EDF2FE");
				ctx.moveTo(20, 100);
				ctx.lineTo(300, 100);
				ctx.stroke();
				
				ctx.setFontSize(12);
				ctx.setFillStyle('#25265E');
				ctx.setTextAlign('left');
				ctx.fillText('项目', 10, 120);
				ctx.fillText('地点', 10, 140);
				ctx.fillText('时间', 10, 160);
				ctx.fillText('人数上限', 10, 180);
				ctx.fillText('发布者', 10, 200);
				
				ctx.setTextAlign('right');
				ctx.fillText('羽毛球', 310, 120);
				ctx.fillText('上海体育场2号口', 310, 140);
				ctx.fillText('10月6日晚8点', 310, 160);
				ctx.fillText('12人', 310, 180);
				ctx.fillText('超级无敌小垃圾', 310, 200);
				
				ctx.drawImage('../../../static/img/boy.png', 200, 210, 20, 20);
				ctx.setTextAlign('right');
				ctx.fillText("4人", 245, 225);
				ctx.drawImage('../../../static/img/girl.png', 265, 210, 20, 20);
				ctx.fillText("4人", 310, 225);
				
				ctx.drawImage('../../../static/img/code.png', 10, 240, 300, 110);
				ctx.draw(true)
				
				// ctx.setFillStyle('#73C3E6');
				// ctx.arc(302, 280, 38, 0, 2 * Math.PI)
				// ctx.fill()
				
				// ctx.save();
				// ctx.beginPath();
				// ctx.arc(302, 280, 38, 0, 2 * Math.PI);
				// ctx.clip();
				// ctx.drawImage('../../../static/qrcode.jpg', 263, 242, 76, 76);
				ctx .restore();
				ctx.draw(true);
				
				this.draw2();
				
				uni.hideLoading();
			},
			draw2(){
				const ctx = uni.createCanvasContext('shareCanvas');
				ctx.clearRect(0, 0, 320, 320);
				ctx.drawImage('../../../static/temp/share.png', 0, 0, 320, 250);
				ctx.setFontSize(14);
				ctx.setFillStyle('red');
				ctx.setTextAlign('left');
				ctx.fillText('10月6日晚8点羽毛球场', 10, 220);
				ctx.fillText('上海体育场2号口', 10, 240);
				ctx.setTextAlign('center');
				ctx.fillText('在道友圈,认识不一样的自己', 160, 20);
				ctx.draw(true, () => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: this.cansWidth*1.5,
						height: 250 * 1.5,
						destWidth: this.cansWidth * 3,
						destHeight: 250 * 3,
						canvasId:'shareCanvas',
						success:(res) => {
							this.tempFilePath = res.tempFilePath;
						}
					});
				});
			}
		},
		components: {
			spaceCompo
		}
	}
</script>

<style>
	@import url("circleInfo.css");
	@import url("../../../static/iconfont/iconfont.css");
	
	/*底部抽屉样式 start*/
	
	.poster-title {
		width: 100%;
		text-align: center;
	}
	.mask-screen {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 9;
	}
	
	.region-box {
		width: 90%;
		margin-left: 5%;
		overflow: hidden;
		position: fixed;
		bottom: 150px;
		left: 0;
		z-index: 10;
		background: #fff;
		padding-top: 20upx;
		height: 800upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
	}
	.region-txt {
		width: 96upx;
		height: 82upx;
		background: #e9edfc;
		line-height: 82upx;
		border-radius: 6upx;
		font-size: 30upx;
		color: #333;
		text-align: center;
		margin-right: 23upx;
		margin-bottom: 26upx;
		flex-grow: 1
	}
	.cancel {
		position: fixed;
		bottom: 80px;
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		z-index: 10;
	}
	.icon-item {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0rpx;
	}
	.button-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-left: 5%;
		width: 90%;
		border-top: 1px solid #EDF2FE;
	}
	.button {
		background-color: #FFFFFF;
		margin-top: 0px;
	}
	/*底部抽屉样式 end*/
</style>
